<template>
  <zh-space>
    <!-- 查询条件栏 -->
    <zh-card title="查询条件" :bordered="true">
      <zh-form :model="data.formData" ref="queryFormRef">
        <zh-form-input prop="appName" label="应用名称" placeholder="请输入应用名称(模糊查询)" v-model="data.formData.appName" />
        <!-- <zh-form-input prop="builderName" label="建设部门" placeholder="请输入建设部门(模糊查询)" v-model="data.formData.builderName" /> -->
        <zh-form-select prop="label" label="标签" placeholder="请选择"  mode="multiple" clearable v-model="data.formData.label" :options="data.dict.labelDict" />
        <zh-form-query @queryClick="query" :showAdvanced="false" :formRef="queryFormRef" />
      </zh-form>
    </zh-card>
    <!-- 查询结果栏 -->
    <zh-table title="" :columns="data.tableColumn" :data="data.tableData" highlight-current-row ref="queryTable">
      <template #builderName_default="{ row }">
        <a-tag color="blue" v-for="(item, index) in row.appLabelName" :key="index">
          {{ item }}
        </a-tag>
      </template>
      <!-- 操作按钮组 -->
      <template #control_default="{ row }">
        <zh-button link size="small" style="fontweight: 600" @click="clickLabel(row)"> 标注 </zh-button>
      </template>
    </zh-table>
    <el-dialog v-model="data.editLabelDialog" title="标签管理" @closed="editLabelDialogClosed" width="60">
        <EditDialog :editLabelInfo="data.editLabelInfo" @changeLabelDialog="changeDialog"></EditDialog>
    </el-dialog>
  </zh-space>
</template>
<script lang="ts" setup name="appLabel">
import ZhSpace from '@/components/zh-space/index.vue';
import EditDialog from './components/EditDialog.vue';

// ------------------定义子组件---------------------------
const changeDialog = (obj: any) => {
	data.editLabelDialog = obj.changeAuditDialog as boolean;
};
// -------------------初始化------------------------------
onMounted(() => {
  query();
  getDict();
});
// ------------------内部变量定义-------------------------
// 表单实例
const queryFormRef = ref<any>();
// 主数据对象
const data = reactive({
  // 表单对象
  formData: {
    label: [] as any,
    appName: '' as string,
  } as any,
  // 查询结果表--表头
  tableColumn: [
    {
      type: 'seq',
      minWidth: 60,
      fixed: 'left',
      align: 'center',
      title: '序号',
    },
    {
      field: 'appName',
      title: '应用名称',
      visible: true,
      align: 'center',
      minWidth: 100,
    },
    {
      field: 'builderName',
      title: '建设部门',
      visible: true,
      align: 'center',
      minWidth: 100,
    },
    {
      field: 'label',
      title: '标签',
      visible: true,
      align: 'center',
      minWidth: 200,
      slots: {
        default: 'builderName_default',
      },
    },
    {
      field: 'operate',
      title: '操作',
      fixed: 'right',
      align: 'center',
      minWidth: 150,
      slots: {
        // 使用插槽模板渲染
        default: 'control_default',
      },
    },
  ] as Array<Object>,
  // 查询结果表--内容
  tableData: [
    {
      appName: '' as any,
      orgName: '' as string,
      label: '' as string,
      labelArray: [] as any, //标签集合
    },
  ] as Array<Object>,

  // 数据字典对象
  dict: {
    //标签
    labelDict: [] as Array<any>,
  },
  editLabelDialog: false, //跳转开关
  editLabelInfo: {}, //跳转数据
});
// ------------------定义调用方法-------------------------
// 查询按钮的回调
const query = () => {
  let params = data.formData;
  params.appLabel = params.label + '';
  $api.common.send.post('appInfo0001', params).then((res: any) => {
    data.tableData = res.result.list;
  });
};
// 查询数据字典信息
const getDict = () => {
  let params = {
    dictFields: 'APPLABEL',
  };
  $api.common.getBatchDict.post(params).then((res: any) => {
    data.dict.labelDict = res.result.APPLABEL;
  });
};
//点击标注
const clickLabel = (row) => {
  data.editLabelInfo = row;
  data.editLabelDialog = true;
};
//关闭标签编辑
const editLabelDialogClosed = () => {
  nextTick(() => {
    query();
    getDict();
  })

};
</script>
<style lang="scss" scoped>
.btnStyle {
	position: absolute;
	top: 73%;
	margin-left: 85%;
}

.btn-submit {
	background-color: #409eff;
	color: white;
}
</style>
